<!DOCTYPE html>
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.well{
  margin:10px;
  background-color: #6DB07A;
}
.well ul li{
    list-style: none;
    text-align: center;
    line-height: 20px;
}
.btn-info{
    background-color: #6DB07A;
}
</style>
<a class="btn btn-info" role="button" data-toggle="collapse" href="#dota" aria-expanded="false" aria-controls="collapseExample">
  <img src="./桌游精灵/imgs/菜单.png" alt="">
</a>

<div class="collapse" id="dota">
  <div class="well">
    <ul>
        <li>首页</li>
        <li>职业</li>
        <li>推荐</li>
        <li>关于</li>
    </ul>
  </div>
</div>
 
